<template>
	<view class="blindboxBody" :style="{background:background}">
		<!-- 盲盒-新年 -->
		<block v-if="type==3">
			<blindboxOne ref="blindboxRef"></blindboxOne>
		</block>
		<!-- 盲盒-世界杯盲盒 -->
		<block v-if="type==2">
			<blindboxTwo ref="blindboxRef"></blindboxTwo>
		</block>
		<!-- 盲盒-普通盲盒 -->
		<block v-if="type==1">
			<blindboxThree ref="blindboxRef"></blindboxThree>
		</block>
	</view>
</template>

<script>
	import blindboxOne from '@/components/blindbox/blindboxOne.vue'
	import blindboxTwo from '@/components/blindbox/blindboxTwo.vue'
	import blindboxThree from '@/components/blindbox/blindboxThree.vue'
	export default {
		components: {
			blindboxOne,
			blindboxTwo,
			blindboxThree
		},
		data() {
			return {
				type: 99, //盲盒类型
				id: '',
				background: '#fff',
				info: {},
			}
		},
		onLoad(e) {
			// this.type = e.type
			this.id = e.id
			this.info = e
			this.getBoxType()
			// if(this.type==3){ //春节
			// 	this.background = '#FCF6E6'
			// }else if(this.type==2){ //世界杯
			// 	this.background = '#133654'
			// }else if(this.type==1){ //普通
			// 	this.background = '#8495ff'
			// }
			// setTimeout(()=>{
			// 	this.$refs['blindboxRef'].openRef(e,this.id,this.type)
			// },500)
			// setTimeout(()=>{
			// 	uni.hideLoading()
			// },5000)
		},
		methods: {
			//获取盲盒类型
			async getBoxType() {
				try {
					uni.showLoading()
					const res = await this.$api.getBoxType(this.id);
					this.type = res.result
					if (this.type == 3) { //春节
						this.background = '#FCF6E6'
					} else if (this.type == 2) { //世界杯
						this.background = '#133654'
					} else if (this.type == 1) { //普通
						this.background = '#8495ff'
					}
					setTimeout(() => {
						this.$refs['blindboxRef'].openRef(this.info, this.id, this.type)
					}, 500)
					uni.hideLoading()
				} catch {
					uni.hideLoading()
				} finally {
					setTimeout(res => {
						uni.hideLoading()
					}, 4000)
				}
			},
		}
	}
</script>

<style>
	.blindboxBody {
		min-height: 100%;
		/* background: #133654; */
	}
</style>
